package myJs.cps

import myJs.Implicits._
import myJs.myPkg.jquery._
import myJs.tool.Tool
import myJs.tool.Tool._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useState
import slinky.web.html._

import scala.collection.SeqMap

/**
 * Created by yz on 3/11/2020
 */
@react object PureToggleCp {

  case class Props(show: Boolean = true, name: String = "", value: Boolean,
                   valueChange: Boolean => Unit)

  val component = FunctionalComponent[Props] { props =>

    object FTool {

      def defaultChange(checked: Boolean) = () => {
        props.valueChange(checked)
      }

    }

    val clsStr = if (props.value) "btn-primary" else "btn-light off"
    div(style := Style(width = "62px", height = "35px"), className := s"toggle btn ${clsStr}",
      data - "toggle" := "toggle", role := "button",
      input(style := Style(height = "32px"), className := "myToggle", `type` := "checkbox",
        data - "toggle" := "toggle", data - "on" := "Yes", data - "off" := "No", name := s"${props.name}",
        className := "", width := "100px", value := "true"),
      div(className := "toggle-group",
        label(className := "btn btn-primary toggle-on", "Yes", onClick := FTool.defaultChange(false)),
        label(className := "btn btn-light toggle-off", "No", onClick := FTool.defaultChange(true)),
        span(className := "toggle-handle btn btn-light")
      )
    )

  }

}



